<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>手风琴案例</title>

    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      img {
        display: block;
      }

      ul {
        list-style: none;
      }

      .king {
        width: 852px;
        margin: 100px auto;
        background: url(images/bg.png) no-repeat;
        overflow: hidden;
        padding: 10px;
      }

      .king ul {
        overflow: hidden;
      }

      .king li {
        position: relative;
        float: left;
        width: 69px;
        height: 69px;
        margin-right: 10px;
      }

      .king li.current {
        width: 224px;
      }

      .king li.current .big {
        display: block;
      }

      .king li.current .small {
        display: none;
      }

      .big {
        width: 224px;
        display: none;
      }

      .small {
        position: absolute;
        top: 0;
        left: 0;
        width: 69px;
        height: 69px;
        border-radius: 5px;
      }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
      // 1. 显示隐藏不能用 show/hide，要用fadeIn/fadeOut
      // 2. 用事件代理时，注意触发事件的元素是谁，因为事件处理函数中的this会不一样
      // 3. 动画开始前要先 stop 一下，不然会有跳动的问题
      $(function () {
        $('.king').on('mouseenter', 'li', function () {
          $(this).stop().animate({ width: '224px' }, 500)
          // 这个fadeIn函数的返回值是调用者那个jq对象
          $(this).find('img.big').stop().fadeIn(500) // .siblings('img.small').fadeOut(500)
          $(this).find('img.small').stop().fadeOut(500)

          $(this).siblings('li').stop().animate({ width: '69px' }, 500)
          $(this).siblings('li').find('img.big').stop().fadeOut(500)
          $(this).siblings('li').find('img.small').stop().fadeIn(500)
        })
      })

      //   $(function () {
      //     // 绑定鼠标移动到小图上的事件
      //     $('.king').on('mouseenter', 'img.small' /* 触发事件的元素 */, function () {
      //       // this 是鼠标进入的那个小图
      //       // $(this).parent().parent() // 找爸爸的爸爸
      //       // TODO：这里有个隐藏的知识点，等会再说

      //       // 找到当前小图对应的外面那个li，将宽度设成224px
      //       $(this).parents('li').stop().animate({ width: '224px' }, 500)
      //       // 将当前小图淡出隐藏，找到其兄弟（大图）淡入显示
      //       $(this).stop().fadeOut(500).siblings('img.big').stop().fadeIn(500)

      //       // 还要将其他所有li的宽度变成69px，并将li内部的小图显示，大图隐藏
      //       $(this).parents('li').siblings('li').stop().animate({ width: '69px' }, 500)
      //       // 找到当前小图对应的外面的那个li 的 其他兄弟们（li）里面的 小图 淡入显示
      //       $(this).parents('li').siblings('li').find('img.small').stop().fadeIn(500)
      //       // 找到当前小图对应的外面的那个li 的 其他兄弟们（li）里面的 大图 淡出隐藏
      //       $(this).parents('li').siblings('li').find('img.big').stop().fadeOut(500)
      //     })
      //   })
    </script>
  </head>

  <body>
    <div class="king" data-name="张三">
      <ul>
        <li class="current">
          <a href="#">
            <img src="images/m1.jpg" alt="" class="small" />
            <img src="images/m.png" alt="" class="big" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/l1.jpg" alt="" class="small" />
            <img src="images/l.png" alt="" class="big" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/c1.jpg" alt="" class="small" />
            <img src="images/c.png" alt="" class="big" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/w1.jpg" alt="" class="small" />
            <img src="images/w.png" alt="" class="big" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/z1.jpg" alt="" class="small" />
            <img src="images/z.png" alt="" class="big" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/h1.jpg" alt="" class="small" />
            <img src="images/h.png" alt="" class="big" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/t1.jpg" alt="" class="small" />
            <img src="images/t.png" alt="" class="big" />
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>
